<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#box{
			width: 500px;
			margin: 10px auto;
			border: 1px solid red;
			overflow: hidden;
		}

		#warp{
			width: 500px;
			overflow: hidden;
		}

		#content{
			width: 500px;
		}

		#warp li{
			margin: 10px;
			text-align: center;
			display: block;
		}

		#content li{
			overflow: hidden;
			margin-bottom: 10px;
		}

		#content li span{
			display: inline-block;
			margin: 0 0 10px 10px;
			color: orange;
		}

		#content li p{
			line-height: 25px;
		}
	</style>
</head>
<body>
	<div id="box">
		<div id="warp">
			<ul>
				<li>
					<span>姓名</span>
					<input id="txt1" type="text" name="name" placeholder="姓名">
				</li>
				<li>
					<textarea id="txt2" name="content" placeholder="内容" rows="5"></textarea>
					<input id="commit" type="button" name="submit" value="提交">
				</li>
			</ul>
		</div>
		<div id="content">
			<ul></ul>
		</div>
	</div>
</body>
	<script type="text/javascript" src='js/jquery-1.11.2.min.js'></script>
	<script type="text/javascript" src='js/jquery.easing.1.3.js'></script>
	<script type="text/javascript">
	$(function(){

		$('#commit').on('click',commit);

		function commit(){
				if ($('#txt1').val() == '' || $('#txt2').val() == '') {	
					alert('姓名或内容不能为空！');
					return;
				}
				var str = '<span>姓名：' + txt1.value + '</span><p>内容：' + txt2.value +'</p><input type="button" name="" value="删除">';
				var liObj = $('<li>'+str+'</li>');
				liObj.children('input').on('click',function(){
					$(this).parent('li').animate({
						height:0
					}, {
						duration:400,
						easing:"easeOutBounce",
						complete:function(){
							$(liObj.children('input')).parent('li').remove();
						}
					})
				});

				$('#content').children('ul').prepend(liObj);

				var liObjHeight = liObj.height(); 
				liObj.css({
					height: 0
				});

				liObj.animate({
					height:liObjHeight
				}, {
					duration:400,
					easing:"easeInBounce",
					complete:function(){

					}
				})
			}
	});
	</script>
</html>

















